import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import swal from 'sweetalert2';

@Component({
    selector: 'app-top',
    templateUrl: './top.component.html',
    styleUrls: ['./top.component.less']
})
export class TopComponent implements OnInit {
    @Output() changeEmmit = new EventEmitter<object>();
    @Output() sortEmmit = new EventEmitter<object>();
    @Output() changeScale = new EventEmitter<any>();
    @Output() onPreview = new EventEmitter<any>();
    @Output() onSave = new EventEmitter<any>();

    @Input()
    p_data = {p_id: '', p_width: '', p_height: '', process_type: '', typename: '' };

    _fontColor: any = '#666666';
    set fontColor(color: string) {
        this._fontColor = color;
        this.emmitter('color', this._fontColor);
    }

    get fontColor() {
        return this._fontColor;
    }


    _bgColor: any = '#666666';
    set bgColor(color: string) {
        this._bgColor = color;
        this.emmitter('background', this._bgColor);
    }

    get bgColor() {
        return this._bgColor;
    }

    selectScale: any;
    scaleOption: any = [
        {
            value: '1', label: '100%'
        },
        {
            value: '0.75', label: '75%'
        },
        {
            value: '0.5', label: '50%'
        }
    ];
    selectFontFamily: any = '';

    fontFamilyOption: any = [
        {
            value: 'Microsoft YaHei', label: '微软雅黑'
        },
        {
            value: 'SimSun', label: '宋体'
        },
        {
            value: 'Microsoft JhengHei', label: '黑体'
        },
        {
            value: 'DFKai-SB', label: '楷体'
        }
    ];

    selectFontSize: any = '16';

    fontSizeOption: any = [
        {
            value: '32', label: '32'
        },
        {
            value: '30', label: '30'
        },
        {
            value: '28', label: '28'
        },
        {
            value: '26', label: '26'
        },
        {
            value: '24', label: '24'
        },
        {
            value: '22', label: '22'
        },
        {
            value: '20', label: '20'
        },
        {
            value: '18', label: '18'
        },
        {
            value: '16', label: '16'
        },
        {
            value: '14', label: '14'
        },
        {
            value: '12', label: '12'
        }
    ];

    _underline = false;
    _fontStyle = false;
    _fontWeight = false;

  constructor( public router: Router, public route: ActivatedRoute) {  }

    ngOnInit() {
        this.selectScale = this.scaleOption[0];
        this.selectFontSize = this.fontSizeOption[9];
        this.selectFontFamily = this.fontFamilyOption[0];
    }

    fontWeight() {
        this._fontWeight = !this._fontWeight;
        this.emmitter('fontWeight', this._fontWeight ? 'bold' : 'normal');
    }

    fontStyle() {
        this._fontStyle = !this._fontStyle;
        this.emmitter('fontStyle', this._fontStyle ? 'italic' : 'normal');
    }

    textDecoration() {
        this._underline = !this._underline;
        this.emmitter('textDecoration', this._underline ? 'underline' : 'none');
    }

    FontFamily($event) {
        if (!$event) {
            this.emmitter('fontFamily', this.selectFontFamily.value);
        }
    }

    FontSize($event) {
        if (!$event) {
            this.emmitter('fontSize', this.selectFontSize.value);
        }
    }

    textAlign(value) {
        this.emmitter('justifyContent', value);
    }

    verticalAlign(value) {
        this.emmitter('alignItems', value);
    }

    emmitter(key: string, value: string) {
        const obj = new Object();
        obj[key] = value;
        this.changeEmmit.emit(obj);
    }

    sort(i) {
        this.sortEmmit.emit(i);
    }

    backTo() {
        console.log(this.p_data.typename);
        this.router.navigate(['xiangmu/full/flows/' + this.p_data.process_type],
            { queryParams: {  p_id: this.p_data.p_id, p_width: this.p_data.p_width, p_height: this.p_data.p_height, process_type: this.p_data.process_type , type_name: this.p_data.typename },
                skipLocationChange: true
            }
        );

    }
  scale($event) {
      if (!$event) {
          this.changeScale.emit({
              'scale': this.selectScale.value
          });
      }
  }

    preview() {
        this.onPreview.emit();
    }

    finalSave() {
        this.onSave.emit();
    }
}
